<template>
	<view class="container">

		<view class="trePart">
			<view class="part" @click="goDetail(1)">
				<image class="img" src="../../static/img/question.png" mode=""></image>
				<text class="txt">常见问题</text>
				<image class="right" src="../../static/img/rightline.png" mode=""></image>
			</view>
			<view class="part" @click="goDetail(2)">
				<image class="img" src="../../static/img/aftersale.png" mode=""></image>
				<text class="txt">售后服务</text>
				<image class="right" src="../../static/img/rightline.png" mode=""></image>
			</view>
			<view class="part" @click="goDetail(3)">
				<image class="img" src="../../static/img/delver.png" mode=""></image>
				<text class="txt">配送说明</text>
				<image class="right" src="../../static/img/rightline.png" mode=""></image>
			</view>
			<view class="partt">
				<image class="img" src="../../static/img/talks.png" mode=""></image>
				<text class="txt">银儿洁@花花经理</text>
				<view class="add" @click="addme">加我微信</view>
			</view>
		</view>

		<view class="weichat" @click="addme" v-show="Isopen">
			<image class="img" src="../../static/img/weichat.jpg" mode="widthFix"></image>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				Isopen: false
			}
		},

		methods: {
			addme() {
				//打开弹框
				this.Isopen = !this.Isopen
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages-me/problem/problem?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		background: #f3f5f7;
		height: auto;
		min-height: 100vh;
		position: relative;

		.weichat {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 100vh;
			background-image: linear-gradient(to right, rgba(203, 154, 157, 0.7), rgba(177, 163, 198, 1));

			.img {
				width: 60%;
				height: 380rpx;
			}
		}

		.trePart {
			background: #ffffff;
			border-radius: 12rpx;
			margin: 0 5%;
			padding: 0 4%;

			.partt {
				display: flex;
				border-bottom: 1px solid #f3f5f7;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-top: 30rpx;
					line-height: 100rpx;
				}

				.txt {
					margin-left: 18rpx;
					width: 68%;
					line-height: 100rpx;
				}

				.add {
					width: 26%;
					margin-top: 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #ff3d12;
					font-size: 24rpx;
					font-weight: bold;
					border: 1px solid #ff3d12;
					border-radius: 50rpx;
				}
			}

			.part {
				display: flex;
				line-height: 100rpx;
				border-bottom: 1px solid #f3f5f7;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-top: 30rpx;
				}

				.txt {
					margin-left: 18rpx;
					width: 84%;
				}

				.right {
					width: 32rpx;
					height: 32rpx;
					margin-top: 34rpx;
				}
			}
		}

	}
</style>
